<template>
    <div style="padding-left:5px;">
        <el-row>
            <el-col align="left">
                <el-form >
                    <el-form-item label="点集合：">
                        <el-table
                                :data="pointList"
                                style="width: 100%">
                            <el-table-column
                                    type="index"
                                    width="50">
                            </el-table-column>
                            <el-table-column
                                    prop="column"
                                    label="列"
                            >
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.column"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="row"
                                    label="行"
                            >
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.row"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100">
                                <template slot-scope="scope">
                                    <el-button style="margin-left:20px;" icon="el-icon-delete"
                                               @click="delPoint(scope.$index)"></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>

                    <el-row>
                        <el-col align="center">
                            <el-button type="primary" @click="addPoint">添加点</el-button>
                            <el-button type="primary" @click="calc">展示</el-button>
                        </el-col>
                    </el-row>


                    <el-form-item label="结果：">
                        <div>
                            <div style="height: 500px;text-align: left;">
                                <v-chart :option="option" :autoresize="true"/>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <div style="padding-left:10px;">

        </div>
    </div>

</template>

<script>
    import lodash from 'lodash'

    export default {
        name: 'axis1',
        data() {
            return {
                pointList: [
                    {row: 1, column: 1},
                    {row: 1, column: 3},
                    {row: 2, column: 2},
                    {row: 2, column: 1},
                ],

                option: null,
                OPTION_TEMPLATE: {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.marker +  '(' + params.data[0] + ', ' + params.data[1] + ')'
                        }
                    },
                    xAxis: {
                        type: 'value',
                        data: [],
                        axisLine: {
                            symbol: ['none', 'arrow'],
                        },
                        minInterval: 1,
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            show: true,
                            symbol: ['none', 'arrow'],
                        }
                    },
                    series: [
                        {
                            data: [],
                            type: 'scatter'
                        }
                    ]
                },
            };
        },
        methods: {
            addPoint() {
                this.pointList.push({
                    row: null,
                    column: null,
                })
            },
            delPoint(index) {
                this.pointList.splice(index, 1)
            },

            async calc() {
                let option = lodash.cloneDeep(this.OPTION_TEMPLATE)
                let xDataArr = []
                for (let point of this.pointList) {
                    if (!point.row || !point.column) {
                        continue
                    }
                    if (!xDataArr.includes(point.column)) {
                        xDataArr.push(point.column)
                    }
                    option.series[0].data.push([point.column, point.row])
                }
                option.xAxis.data = xDataArr.sort()
                this.option = option
            },
        },
        computed: {
        },
        mounted() {
            this.calc()
        }
    };
</script>
